import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {
  // 计算已完成的个数,这里可以设置一个函数,书写已完成数据的逻辑
  const getCheckedNum = () => {
    // 这里计算已完成的数据,可以直接使用reduce累加器
    // 当我们勾选的时候,也就是选项状态改变的时候,底下的已完成数据会进行相应的改变
    // 勾选一个增加1,那么可以利用c.done的状态来进行累加操作
    // c.done默认false,当我们选中的时候变为true,此时+1,初始值默认为0
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }

  // 全部选中的复选框事件函数逻辑
  const checedAllHandle = (e) => {
    // 这里打印可以看到,我们点击复选框的checked值为true
    // console.log(e.target.checked);
    // 设置变量接收点击事件函数的结果
    const allChecked = e.target.checked;
    // 当我们点击复选框的时候，将它的结果赋值给上面的每一个选项，进行同步
    const newTodoList = todoList.map((item) => {
      // 将todoList里面的每一个数据扩展开,然后将每一个选项的结果变为点击全选复选框的结果
      return {...item,done:allChecked}
    })
    // 将上面事件函数的返回结果重新设置
    setTodoList(newTodoList)
  }

  // 清除所有已完成选项的事件函数逻辑
  const deleteAllHandle=()=>{
    // 将todoList里面每一个选项数据进行过滤,过滤条件为当item.done与item.done的默认结果不一样的时候,
    // 例如:当item已经勾选,此时done结果为ture,我们取反item.done此时结果为false,满足false条件的会被过滤掉
    // 形成新的数组,然后再次被渲染进去,此时也就完成了被勾选的渲染删除的逻辑  
    const deleteTodoList=todoList.filter(item=>!item.done)
    setTodoList(deleteTodoList)
  }


  return (
    <div className="todo-footer">
      <label>
        {/* 这里是已完成前面的复选框,当选项全部都被勾选的时候,已完成的复选框会默认选中
          此时这种情况也就意味着已完成的数据和全部的数据是相等的,,当他们相等的时候结果为true
          所以我们可以给复选框也设置一个checked属性,当已完成的数据和全部的数据不相等的时候
          结果为false,不勾选,相等的时候,结果为true,默认勾选
        */}
        {/* 给全选全选绑定一个事件函数 */}
        <input onChange={checedAllHandle} type="checkbox" checked={getCheckedNum() === todoList.length && todoList.length !== 0} />
      </label>
      <span>
        {/* 这里接收全部的数据的数量直接用数据的长度代替即可 */}
        <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
      </span>
      {/* 绑定一个清除所有已完成选项的事件函数 */}
      <button onClick={deleteAllHandle} className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}
